<template>
  <el-container class="configProject">
    <el-header>
      <header-info></header-info>
    </el-header>
    <el-main>
      <el-aside class="configBaseInfoController">
        <section class="panel">
          <header class="panel-header">环境列表</header>
          <div class="panel-body">
            <ul>
              <template v-for="(item,index) in groupList">
                <li :key="index" :class="['list-group-item','node-treeView',{active:categoryIndex==index}]" @click="liAddClass(index,$event)">
                  <span>{{item}}</span>
                </li>
              </template>
            </ul>
          </div>
        </section>
        <section class="panel">
          <header class="panel-header">项目信息</header>
          <div class="panel-body">
            <el-form ref="form" :model="projectInfo" label-width="100px" class="project-info">
              <el-form-item label="AppId：">
                <span>{{projectInfo.appId}}</span>
              </el-form-item>
              <el-form-item label="应用名称：">
                <span>{{projectInfo.name}}</span>
              </el-form-item>
              <el-form-item label="部门：">
                <span>{{projectInfo.class}}</span>
              </el-form-item>
              <el-form-item label="负责人：">
                <span>{{projectInfo.person}}</span>
              </el-form-item>
              <el-form-item label="邮箱：">
                <span>{{projectInfo.mail}}</span>
              </el-form-item>
            </el-form>
          </div>
        </section>
        <section class="panel">
          <div class="panel-body">
            <div class="list-group-item function">
              <div class="icon-project-manage" :style="projectManage">
                <span>管理项目</span>
              </div>
            </div>
            <div class="list-group-item function icon-plus">添加集群</div>
            <div class="list-group-item function icon-plus">添加Namespace</div>
          </div>
        </section>
      </el-aside>
      <el-main class="configItemInfo view-mode-1">
        <div class="alert alertInfo alertDismissible">
          <el-button type="prime" size="small" class="btn_default">不再提示</el-button>
          <div class="textInfo">
            <strong>注意:</strong>
            <span>所有不属于 'SHAJQ,4444,xxxx,aaabbbccc,lenze,dssdsd,uata,ttttttttt,test,2e1d1,fdfdf,JAVA.MSG.UAT,rtttg,111111,test1,fas,ceshi22,Nirvanan,justdoit,testzzz,vrd'
              集群的实例会使用default集群（当前页面）的配置，属于 'SHAJQ,4444,xxxx,aaabbbccc,lenze,dssdsd,uata,ttttttttt,test,2e1d1,fdfdf,JAVA.MSG.UAT,rtttg,111111,test1,fas,ceshi22,Nirvanan,justdoit,testzzz,vrd'
              的实例会使用对应集群的配置！
            </span>
          </div>
        </div>
        <namespace-panel></namespace-panel>
      </el-main>
    </el-main>
  </el-container>
</template>
<script>
  import HeaderInfo from "../headerInfo.vue";
  import NamespacePanel from "./namespacePanel.vue";

  export default {
    components: {
      HeaderInfo: HeaderInfo,
      NamespacePanel: NamespacePanel
    },
    data() {
      return {
        projectManage: {
          backgroundImage: "url(" + require("@/assets/manage.png") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "20px",
          backgroundPosition: "5% 50%",
          padding: "5px 0 5px 50px",
        },
        categoryIndex: 1,
        groupList: [
          'sadkasld',
          'sadsad',
          'sadsa',
          'gfdsgsd',
        ],
        projectInfo: {
          appId: 'orange',
          name: 'base-gateway-server',
          class: '服务部(service)',
          person: 'VansenChen',
          mail: 'vansenchen@163.com12313123123123123123'
        },
      }
    },
    methods: {
      liAddClass(index, event) {
        this.categoryIndex = index;
      },
    },
  }

</script>

<style lang="scss">
  .configProject {
    height: 100%;
    background: #f1f2f7;
    .el-header {
      padding: 0px !important;
      background-color: #ffffff;
      min-height: 50px !important;
      margin-bottom: 20px;
    }
    .el-main {
      min-height: 500px;
      padding-bottom: 75px;
      overflow: hidden;
      .configBaseInfoController {
        position: absolute;
        width: 195px !important;
        top: 85px;
        left: 15px;
        margin-bottom: 25px;
        background: #f1f2f7;
        z-index: 2;
        .panel {
          margin-bottom: 20px;
          background-color: #fff;
          border: 1px solid transparent;
          border-radius: 4px;
          -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
          .panel-header {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
          }
          .panel-body {
            .list-group-item {
              position: relative;
              display: block;
              padding: 10px 15px;
              margin-bottom: -1px;
              background-color: #fff;
              border: 1px solid #ddd;
            }
            .node-treeView {
              cursor: pointer;
              border: 0;
              border-top: 1px solid #eff2f7;
              text-align: center;
              &:first-child {
                border-top-right-radius: 4px;
                border-top-left-radius: 4px;
                text-align: left;
              }
              &:hover {
                background-color: #F5F5F5;
              }
            }
            .active {
              color: #FFFFFF !important;
              background-color: #428bca !important;
            }
            .project-info {
              .el-form-item {
                margin-bottom: 0px !important;
              }
              span {
                display: table-cell;
                vertical-align: inherit;
                word-wrap: break-word;
                word-break: break-all;
                border-bottom: 1px dotted gray;
              }
            }
            .function {
              font-size: 14px;
              padding: 16px 15px;
              span {
                display: inline-block;
                text-align: center;
              }
            }
          }

        }
      }
      .configItemInfo {
        padding: 0px;
        .alert {
          padding: 15px;
          padding-right: 15px;
          margin-bottom: 20px;
          border: 1px solid transparent;
          border-top-color: transparent;
          border-right-color: transparent;
          border-bottom-color: transparent;
          border-left-color: transparent;
          border-radius: 4px;
          font-size: 13px;
          .btn_default {
            float: right;
            margin-top: -7px;
            margin-right: -15px;
            color: #333;
            background-color: #fff;
            border-color: #ccc;
            &:hover {
              color: #333;
              background-color: #e6e6e6;
              border-color: #adadad;
            }
          }
          .textInfo {
            span {
              word-wrap: break-word;
              word-break: break-all;
            }
          }
        }
        .alertInfo {
          background-color: #d9edf7;
          border-color: #bce8f1;
          color: #31708f;
        }
        .alertDismissible {
          padding-right: 35px;
        }
      }
      .view-mode-1 {
        margin-left: 235px;
        padding-right: 15px;
      }
    }
  }

</style>
